<!DOCTYPE html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片轮播 jq(淡入淡出)</title>
    <style type="text/css">
        body,div,ul,li,a,img{margin: 0;padding: 0;}
        ul,li{list-style: none;}
        a{text-decoration: none;}

        .wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
        .banner{width: 400px;height: 200px;overflow: hidden;}
        .imgList{width:400px;height:200px;z-index: 10;}
        .imgList li{display: none;}
        .imgList .imgOn{display: inline;}
        .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0;filter:alpha(opacity=40);background: black;}
        .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
        .infoList li{display: none;}
        .infoList .infoOn{display: inline;color: white;}
        .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
        .indexList li{float: left;margin-right: 5px;width: 50px;height: 5px;border-radius: 5px;background: white;cursor: pointer;}
        .indexList .indexOn{background: grey;font-weight: bold;color: white;}
    </style>
</head>
<body>
<div class="wrapper"><!-- 最外层部分 -->
    <div class="banner"><!-- 轮播部分 -->
        <ul class="imgList"><!-- 图片部分 -->
            <li class="imgOn"><a href="#"><img src="images2/u14.png" width="400px" height="200px" ></a></li>
            <li><a href="#"><img src="images2/u15.png" width="400px" height="200px" ></a></li>
            <li><a href="#"><img src="images2/u16.png" width="400px" height="200px" ></a></li>
        </ul>
        <div class="bg"></div> <!-- 图片底部背景层部分-->
        <ul class="indexList"><!-- 图片右下角序号部分 -->
            <li class="indexOn"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/jquery/jquery-3.2.1.js"></script>
<script type="text/javascript">
    var curIndex = 0; //当前index
    //  alert(imgLen);
    // 定时器自动变换2.5秒每次
    var autoChange = setInterval(function(){
        if(curIndex < $(".imgList li").length-1){
            curIndex ++;
        }else{
            curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex);
    },3000);

    $(".indexList").find("li").each(function(item){
        $(this).hover(function(){
            clearInterval(autoChange);
            changeTo(item);
            curIndex = item;
        },function(){
            autoChange = setInterval(function(){
                if(curIndex < $(".imgList li").length-1){
                    curIndex ++;
                }else{
                    curIndex = 0;
                }
                //调用变换处理函数
                changeTo(curIndex);
            },2500);
        });
    });
    function changeTo(num){
        $(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
    }
</script>
</body>
</html>